<template>
  <div class="app-container">
    <div class="head">
      <el-form :model="queryParams" ref="queryForm" :inline="true">
        <el-form-item label="达人名称：" prop="">
          <el-input v-model="queryParams.nickName" placeholder="请填写" clearable />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="handleQuery">查询</el-button>
          <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="listBox">
      <div class="listBox_head">
        <el-button type="primary" style="margin: 10px 0 20px" @click="addClick">新增达人</el-button>
      </div>
      <el-table v-loading="loading" :data="tabList" stripe border>
        <el-table-column label="序号" align="center" type="index" width="64px" />
        <el-table-column label="用户ID" align="center" prop="id" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column label="用户昵称" align="center" prop="nickName" :show-overflow-tooltip="true"></el-table-column>
        
        <el-table-column label="创建时间" align="center" prop="createTime" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column label="状态" align="center" prop="phone" :show-overflow-tooltip="true">
          <template  slot-scope="scope">
            <div v-if="scope.row.status == 1">启用</div>
            <div v-if="scope.row.status == 2">禁用</div>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button size="mini" type="text" @click="handleStatus(scope.row)" v-if="scope.row.status == 1">禁用 </el-button>
            <el-button size="mini" type="text" @click="handleStatus(scope.row)" v-if="scope.row.status == 2">启用</el-button>
            <el-button size="mini" type="text" @click="handleDetele(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
        @pagination="getList"></pagination>
    </div>
    <Dialog :id="dialogId" v-bind="$attrs" v-if="dialogVisible" :visible.sync="dialogVisible" @success="_handleSuccess">
    </Dialog>
  </div>
</template>
  
<script>
import {
  getList,
  deleteTalent,
  editStatus,
} from "@/api/setting/talent";
import Dialog from "@/views/setting/talentManagement/components/dialog";
export default {
  nickName: "",
  components: {
    Dialog
  },
  data() {
    return {
      dialogId: '',
      dialogVisible: false,
      // 遮罩层
      loading: false,
      // 导出遮罩层
      // 总条数
      total: 0,
      //表格数据
      tabList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        nickName: '', //达人名称
      }
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /** 查询列表 */
    getList() {
      this.loading = true;
      getList(this.queryParams).then(response => {
        response.result.records.forEach(item => {
          for (var key in item) {
            if (item[key] === '') {
              item[key] = "-";
            }
          }
        });
        this.tabList = response.result.records;
        this.total = response.result.total;
        console.log(this.total)
        this.loading = false;
      });
    },
    // 表单重置
    reset() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        nickName: '', //行业名称
      };
      // this.resetForm("form");
      this.handleQuery()
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      // this.resetForm("queryForm");
      this.reset();
      this.handleQuery();
    },
    //新增
    addClick() {
      this.dialogId = null
      this.dialogVisible = true;
    },
    // 编辑
    editClick(row) {
      this.dialogId = row.id
      this.dialogVisible = true;
    },
    _handleSuccess(e) {
      //成功回调
      // this.resetQuery()
      this.getList()
    },
    //修改状态
    handleStatus(row){
      var status = row.status
      if(status == 1){
        var talentStatus = 2
        var text = '是否禁用该达人？'
      }else if(status == 2){
        var talentStatus = 1
        var text = '是否启用该达人？'
      }

      this.$confirm(text, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        
      }).then(() => {
        var data = {
          id: row.id,
          talentStatus: talentStatus,
        }
        editStatus(data).then((res) => {
          this.$message({
            message: "修改成功",
            type: "success",
            duration: 1500,
          });
          setTimeout(() => {
            this._handleSuccess();
          }, 500)
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消修改'
        });
      });
    },
    //删除
    handleDetele(id) {
      this.$confirm('是否删除该达人？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'error'
      }).then(() => {
        deleteTalent(id).then((res) => {
          this.$message({
            message: "删除成功",
            type: "success",
            duration: 1500,
          });
          setTimeout(() => {
            this._handleSuccess();
          }, 500)
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    }
  }
};

</script>
<style scoped>
.head {
  box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
  background-color: #fff;
  border-radius: 8px;
  padding: 20px 20px 0;
}

.listBox {
  box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
  background-color: #fff;
  border-radius: 8px;
  padding: 20px 20px;
  margin-top: 10px;
}

.listBox_head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
</style>
  